<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html" />
	<link href="" title="" rel="index">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>webApp - ZAKER导航栏滑动</title>
	<style>
		*{padding:0;margin:0}
		body{margin:0;-webkit-font-smoothing: antialiased; }
		ul,li{list-style-type: none;}
		a{text-decoration: none; color: #000;}
		a:visited {color: #888;}
		div.titlebar_left{overflow: hidden;text-decoration: none;background:url(tab_border.png) no-repeat right top;background-size:0.2em 2.2em;position: relative;height:2.1em;-webkit-overflow-scrolling: touch;}
		div.titlebar{list-style-type: none;margin: 0px;  display: block;  margin-left: 5px;white-space: nowrap;font-size:0px;overflow:hidden;overflow-x:scroll;}
		div.titlebar a{line-height:2.3em; text-align: center; padding:0 8px 0;display:inline-block;white-space: nowrap;font-size:14px;}
		a.on{border-bottom: 0.2em solid #f84444;color:#f84444;}
		div.titlebar a:visited {color: #000;}
		div.titlebar a.on:visited {color: #f84444;}
		.titlebar_left .titlebar::-webkit-scrollbar {
		  height: 0;
		  display: none;
		}
		.tb{
		background: #fff;
		}
		#head{width: 100%;-moz-opacity:0.95;opacity: 0.95;background-color:#f84444;height:42px;overflow:hidden;}
		.titlebar_right{float:right;}
		.titlebar_right a{color:#f84444;width:2em;height:2em;line-height:2em;text-align:center;margin:0 8px 0;display:inline-block;white-space: nowrap;}
		#head_box{position:fixed;left:0;top:0;width:100%;background:#fff;border-bottom: 1px solid #e0e0e0;}
		</style>
		<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
	<div id="head_box">		
		<div class="titlebar_right">
			<a href="###">
				<img src="add.png" width="12" />	
			</a>
		</div>
		<div class="titlebar_left">
			<div class="titlebar">
				<a href="javascript:void(0);">热点</a>
				<a href="javascript:void(0);">娱乐</a>
				<a href="javascript:void(0);">汽车</a>
				<a class="on" href="javascript:void(0);">体育</a>
				<a href="javascript:void(0);">科技</a>
				<a href="javascript:void(0);">段子</a>
				<a href="javascript:void(0);">美女</a>
				<a href="javascript:void(0);">国内</a>
				<a href="javascript:void(0);">国际</a>
				<a href="javascript:void(0);">军事</a>
				<a href="javascript:void(0);">财经</a>
				<a href="javascript:void(0);">互联网</a>
				<a href="javascript:void(0);">教育</a>
				<a href="javascript:void(0);">时尚</a>
			</div>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">
	var navScroll = function(opt){
        var opt = $.extend(this,{
            wrap : '.titlebar_left',
            bar : '.titlebar',
            active : '.on'
        },opt);
        this.init();
    };
	navScroll.prototype = {
        init:function(){
            this.box = $(this.wrap);
            if(!this.box.length){
                return false;
            }
            this.bar = this.box.children(this.bar);
            this.a = this.bar.children();
            this.render();
        },
        render : function () {
            this.initScrollLeftVal();
            this.selectCurChannel();
        },
        initScrollLeftVal : function(){
            var body_w = document.body.clientWidth//body窗口宽度
                ,bar_w = this.bar[0].scrollWidth;//容器宽度
            this.a.each(function() {
                var s_l = 0,
                    a_w = this.clientWidth,//内容宽度
                    _offset = this.getBoundingClientRect().left;//获取元素位置,相当$(this).offset().left;
                s_l= body_w / 2 - a_w / 2 >= _offset ? 0 : _offset > bar_w - body_w / 2 - a_w / 2 ? Math.max(bar_w - body_w, 0) : -body_w / 2 + a_w / 2 + _offset,
                $(this).attr("scroll-left", s_l)
            })
        },
        selectCurChannel : function(){
            var _a = this.bar.children(this.active)
            var s_l = _a.attr("scroll-left");
            this.bar.scrollLeft(s_l)
        }
    }

	$(document).ready(function(){
		 new navScroll();
	});

</script>
